.lsg {
  @extend %lsg-reset;
  background: $lsg-background-color;
  display: block;
}

.lsg-container {
  @extend %lsg-reset;
  display: block;
  min-height: 50vh;
}

.lsg-footer {
  @extend %lsg-reset;
  display: block;
  margin: (4 * $lsg-gutter) auto;
  max-width: $lsg-width;
}

.lsg-logo {
  $logo-size: ceil($lsg-font-size / 3) * 9;
  @extend %lsg-reset;
  color: transparent;
  display: block;
  font-size: 0;
  height: $logo-size * 2;
  line-height: $logo-size * 2;
  margin: 0 auto (2 * $lsg-gutter);
  position: relative;
  text-align: center;
  width: $logo-size * 8;
  z-index: 2;

  &:hover {
    color: $lsg-color;
  }

  &::before {
    color: transparent;
    content: "Made with The LivingStyleGuide Gem";
    display: block;
    font-family: $lsg-font-family;
    font-size: $lsg-font-size;
    transform: scale(0.5);
    transition: all 0.1s;
    white-space: nowrap;
  }

  &:hover::before {
    color: $lsg-color;
    transform: scale(1);
  }

  // scss-lint:disable SpaceAfterPropertyColon
  &::after {
    $unit: $logo-size / 9;
    $position-a: $unit;
    $position-b: 5 * $unit;
    background:
      linear-gradient(to top, $lsg-background-color, $lsg-background-color),
      linear-gradient(to top, $lsg-background-color, $lsg-background-color),
      linear-gradient(to top, $lsg-background-color, $lsg-background-color),
      linear-gradient(to top, $lsg-background-color, $lsg-background-color),
      $lsg-color;
    background-position:
      $position-a $position-a,
      $position-a $position-b,
      $position-b $position-a,
      $position-b $position-b;
    background-repeat: no-repeat;
    background-size: (3 * $unit) (3 * $unit);
    content: "";
    height: $logo-size;
    left: 50%;
    margin: $logo-size / -2;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    transition: all 0.1s linear;
    width: $logo-size;
    z-index: -1;
  }

  &:hover::after {
    $overlap: 0;
    $position-a: -$overlap;
    $position-b: $logo-size / 2 - $overlap;
    $size: $logo-size / 9 * 5 + 2 * $overlap;
    background-color: transparent;
    background-position:
      $position-a $position-a,
      $position-a $position-b,
      $position-b $position-a,
      $position-b $position-b;
    background-size: $size $size;
  }
}
